<template>
            <!--  touchstart： 当手指触摸屏幕时触发； 即使已经有一个手指放在了屏幕上也会触发。
            touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。
            touchend：当手指从屏幕上移开时触发。 -->
    <div class="list">
        <li class="item" v-for="item of letters" :key="item" :ref="item"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            @click="handleLetterClick"
        >{{ item }}</li>
    </div>
</template>
<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  },
  data () {
    return {
      touchStatus: false
    }
  },
  methods: {
    handleLetterClick (e) {
      // 子组件可以使用 $emit 触发父组件的自定义事件
      this.$emit('change', e.target.innerText)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        const startY = this.$refs['A'][0].offsetTop // 拿到距离顶部的高度
        const touchY = e.touches[0].clientY - 79
        const index = Math.floor((touchY - startY) / 20) // 获得下标的位置
        if (index >= 0 && index < this.letters.length) {
          this.$emit('change', this.letters[index])
        }
      }
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>
<style  lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .list
        // 居中
        display flex//弹性盒子
        flex-direction column//规定灵活项目的方向;灵活的项目将垂直显示
        justify-content center//用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式;项目位于容器的中心
        position absolute
        right 0
        top 1.58rem
        bottom 0
        width .4rem
        .item
            text-align center
            list-style-type  none
            line-height .44rem
            color $bgColor
</style>
